<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <title>jquery.ui.combobox.js demo nr. 1</title>
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/cupertino/jquery-ui.css" rel="Stylesheet" />
        <style type="text/css">
            html, body {
                margin: 1em; /*font-size: 12px; font-family: verdana;*/
            }
            .ui-widget, .ui-button-text-only {
                font-size: 12px;
            }
            .ui-widget-header {
                font-size: 13px;
            }
            .ui-button .ui-button-text {
                line-height: 0.7;
                font-size: 12px;
            }
            form select {
                margin-right: 0.2em;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

        <script type="text/javascript" src="../src/js/jquery.ui.combobox.js"></script>        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#fixtureCombo").combobox();

                $("#fixtureCombo").bind("comboboxaddoption", function(evt, msg){
                    alert("option added with value: " + msg);
                });

                $("#fixtureCombo").bind("comboboxaddoptionerror", function(evt, msg){
                    alert("option NOT added: " + msg);
                });
            });
        </script>
    </head>
    <body>
        <h1>jQuery UI Combobox</h1>

        <h2>Demonstration nr. 1</h2>

        <form action="/" method="post">
            <label for="fixtureCombo">
                a select turned into a combobox
            </label>

            <select name="fixtureCombo[id]" id="fixtureCombo">
                <option value=""></option>
                <option value="1">optie een</option>
                <option value="2">optie twee</option>
            </select>
        </form>

    </body>
</html>